<template>
  <div class="storeManage">
    <div class="head">
      <el-row :gutter="20">
        <el-col :span="6">
          <p>仓库编号</p>
          <el-input placeholder="请输入" v-model="form.like_code"></el-input>
        </el-col>
        <el-col :span="6">
          <p>仓库名称</p>
          <el-input placeholder="请输入" v-model="form.like_name"></el-input>
        </el-col>
        <el-col :span="6">
          <p>仓库状态</p>
          <el-select
            v-model="form.status"
            placeholder="请选择"
            style="width: 100%"
          >
          <el-option label="全部" value></el-option>
          <el-option label="启用" :value=1></el-option>
          <el-option label="停用" :value=0></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <div class="btn">
            <el-button type="warning" @click="search">搜索</el-button>
            <el-button @click="quxiao">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <!-- 点击新增路由跳转新增页面 -->
      <button class="addBtn" @click="$router.push('/baseinfo/ckdetail')">新增仓库</button>
      <el-table :data="tableList" border style="width: 100%"  v-loading="loading">
        <el-table-column type="index" label="序号" width="140">
        </el-table-column>
        <el-table-column prop="code" label="仓库编码" width="130">
        </el-table-column>
        <el-table-column prop="name" label="仓库名称" width="130">
        </el-table-column>
        <el-table-column prop="type" label="仓库类型" width="130">
        </el-table-column>
        <el-table-column prop="location" label="省/市/区" width="280">
        </el-table-column>
        <el-table-column prop="address" label="详细地址" width="130"> </el-table-column>
        <el-table-column prop="status" label="仓库状态" width="130"> </el-table-column>
        <el-table-column prop="surface" label="仓库面积m²" width="130"> </el-table-column>
        <el-table-column prop="includedNum" label="库区数量" width="130"> </el-table-column>
        <el-table-column prop="personName" label="负责人" width="130"> </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="130"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180"> </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button @click="$router.push(`/baseinfo/ckdetail/?id=${scope.row.id}`)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small" v-if="scope.row.status==='启用'" @click="Statuchange1(scope.row)">停用</el-button>
            <el-button type="text" size="small" v-if="scope.row.status==='停用'" @click="Statuchange2(scope.row)">启用</el-button>
            <el-button type="text" size="small" @click="delfn(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Page
      :total="tabledata.total"
      :paginationPage="tabledata.pages"
      :paginationPagesize="tabledata.size"
      @pageChange="pageChange"
      @pageSizeChange="pageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { Status, getList, del } from '@/api/warehousemanage'
import Page from '@/componments/Page.vue'
export default {
  components: { Page },
  name: 'index',
  data () {
    return {
      form: {
        like_code: '',
        like_name: '',
        current: 1,
        size: 10,
        descs: 'createTime'
      },
      tabledata: {},
      tableList: [],
      loading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 搜索按钮
    async search () {
      const res = await getList(this.form)
      console.log(res.records)
      res.data.records.forEach(item => {
        if (item.type === 'JGC') {
          item.type = '加工仓'
        } else if (item.type === 'ZZC') {
          item.type = '中转仓'
        } else if (item.type === 'CBC') {
          item.type = '储备仓'
        } else if (item.type === 'LCC') {
          item.type = '冷藏仓'
        }

        if (item.status === 1) {
          item.status = '启用'
        } else if (item.status === 0) {
          item.status = '停用'
        }
      })
      this.tableList = res.data.records
      this.tabledata = res.data
    },
    // 重置按钮
    quxiao () {
      this.form = {
        code: '',
        name: '',
        status: null
      }
      this.getList()
    },
    // 编辑按钮
    edit (row) {
      console.log(row)
    },
    Statuchange1 (row) {
      this.loading = true
      this.$confirm('确定要停用吗？').then(async () => {
        row.status = 0
        await Status({ id: row.id, status: row.status })
        this.getList()
        this.loading = false
      })
    },

    Statuchange2 (row) {
      this.loading = true
      this.$confirm('确定要启用吗？').then(async () => {
        row.status = 1
        await Status({ id: row.id, status: row.status })
        this.getList()
        this.loading = false
      })
    },
    // 删除
    async delfn (row) {
      await del(row)
      this.$message.success('删除成功')
      this.getList()
    },

    async getList () {
      const res = await getList(this.form)
      console.log(res)
      res.data.records.forEach(item => {
        if (item.type === 'JGC') {
          item.type = '加工仓'
        } else if (item.type === 'ZZC') {
          item.type = '中转仓'
        } else if (item.type === 'CBC') {
          item.type = '储备仓'
        } else if (item.type === 'LCC') {
          item.type = '冷藏仓'
        }

        if (item.status === 1) {
          item.status = '启用'
        } else if (item.status === 0) {
          item.status = '停用'
        }
      })
      this.tabledata = res.data
      this.tableList = res.data.records
    },
    pageChange (pageNum) {
      console.log(pageNum)
      this.form.current = pageNum
      this.getList()
    },

    pageSizeChange (pageSize) {
      console.log(pageSize)
      this.form.size = pageSize
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.storeManage {
  .head {
    height: 127px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    margin-bottom: 20px;
    p {
      margin-bottom: 10px;
      height: 18px;
      font-size: 12px;
      color: #887e7e;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
    }
    .el-select {
      ::v-deep .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 1px solid #f8f5f5;
        background: #f8f5f5;
        border-radius: 6px;
      }
    }
    .el-input {
      ::v-deep .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 1px solid #f8f5f5;
        background: #f8f5f5;
        border-radius: 6px;
      }
    }

    .btn {
      float: right;
      margin-top: 25px;
      .el-button {
        border-radius: 20px;
      }
    }
  }
  .content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    .addBtn {
      margin-left: 30px;
      margin-top: 20px;
      margin-bottom: 20px;
      background: #00be76;
      color: #fff;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
    }
    .el-table {
      ::v-deep .el-table__header-wrapper{
        th {
         background: rgb(249, 246, 238);
         text-align: center;
        }
      }
      ::v-deep .el-table__body-wrapper {
        td {
           text-align: center;
        }
      }
    }
  }
}
</style>
